<template>
<div class="main">
  <div class="jumbotron">
    <div class="wh jumbotron-inner"  v-html="header.resContent"></div>
    <div class="lang">
      <div class="lang_2"></div>
    </div>     
  </div>
  <div class="w path">
  	<nuxt-link to="/">首页</nuxt-link>
    <template v-if="curTagId != '' ">
    	<a-icon class="path-icon" type="right" /> 资讯列表
      <a-icon class="path-icon" type="right" />
      <span class="en">{{curTagId | setCurTagId(tags)}}</span>
    </template>
    <template v-if="curCateId != '' ">
      <span @click="setCate([item.id])" v-for="item in path" :key ="item.id" > 
       <a-icon class="path-icon" type="right"/>
       {{item.cateName}}
      </span>
    </template>
    <template v-if="curTagId == '' && curCateId == ''" ><a-icon class="path-icon" type="right"/> 资讯列表</template>
  </div>
  <div class="w"  style="padding-bottom:20px;">
  <a-row class="list" :gutter="15" >
  	<a-col  :xs=24 :sm=24 :md=17 :lg=17 :xl=17>
    	<div class="tree" v-if="list.length == 0" style="padding:100px 0">
    	 <a-empty description="该分类暂无数据" />
      </div> 
      <a-list v-else :data-source="list">
        <a-list-item   slot="renderItem"  slot-scope="item, index">
					<a-row class="info-content">
            <a-col :span="8" v-if="item.titleImg">
              <nuxt-link :to="{name:'detail-id',params:{id : item.id} }" class="info-img">
                <img class="tit-img" :src="item.titleImg | setImgUrl">
              </nuxt-link>
            </a-col>
            <a-col :span="item.titleImg ? 16 : 24"  class="info-li">
              <h4 class="ellipsis"><nuxt-link :to="{name:'detail-id',params:{id : item.id} }"  >{{item.title}}</nuxt-link></h4>
              <p class="hidden-xs">{{item.introduct}}</p>
            </a-col>
            <div class="text-bot">
              <a-icon type="clock-circle" /><span class="en">{{item.created | setTimeFormat}}</span>
              <a-icon type="user" /><span class="en">admin</span>
              <a-icon @click="setLinkNum(item,'2')" type="like" /><span class="en">{{item.likeNum}}</span>
              <a-icon type="eye" /><span class="en">{{item.clickNum}}</span>
            </div>            
          </a-row>
        </a-list-item> 
      </a-list>
      <div class="page" v-if="totalNum > 4">
      	<a-pagination :current="page" :page-size="6" @change="setPage" :total="totalNum" />
      </div>
    </a-col> 
    <a-col :xs=0 :sm=0 :md=7 :lg=7 :xl=7 style=" padding-bottom:5px;">
    	<div class="tree">
      	<h4 class="tree-tit">资讯分类</h4>
     		<a-tree style=" padding:0 0 15px 0;" :tree-data="treeData" blockNode :selectedKeys="[curCateId]" @select="setCate" :replaceFields="{title:'cateName',key:'id'}" :expand-on-click-node="false" default-expand-all></a-tree>    	
    	</div>
      <a-affix :offsetTop="95">
      	<div class="tree">
          <h4 class="tree-tit">热门标签</h4>
          <div class="tag en">
          	<span v-for="item in tags" :class="{'cur' : curTagId == item.id}" @click="setCurTag(item.id)" :key="item.id">{{item.tagName}}</span>
          </div>
        </div>  
      </a-affix>
    </a-col>  
  </a-row>
  </div>
</div>
</template>


<script>
import api from "@/global/api";
export default {
  validate ({ params }) {
  	return true;
	},	
  watchQuery: ['tagId','cateId'],
  async asyncData({route,$axios,query,params}) {
		let channel = 'list';
		let treeData = await $axios.get(api.getContentCate);
		treeData = treeData.data;
		let tags = await $axios.get(api.getContentTags);
		tags = tags.data;
		let page = params.page ? parseInt(params.page) : 1;
		params.pageNo = page;
		params.pageSize = 6;
		params.cateId = query.cateId ? query.cateId : '';
		params.tagId = query.tagId ? query.tagId : '';
		let curCateId = params.cateId;
		let curTagId = params.tagId;
		let list = await $axios.get(api.getContentList,{params});
		let totalNum = list.totalNum;
		let path = list.path;
		list = list.data;
		let res = await $axios.get(api.getChannel,{params:{channel}})
		let pageData = res.data.pageData;
		let header = pageData.header;
		let title = res.data.pageTitle;
		let description = res.data.pageDescription;
		return {treeData,path,tags,page,curCateId,curTagId,totalNum,list,header,title,description}
  },
	head(){
		return{
			title:this.title,
			meta:[
				{hid:'description',name:'list',content:this.description}
			]
		}
	},	
  data() {
    return {
			selectedKey:[],
			listLoad:true,
    }
  },
	mounted() {
		this.curCateId = this.$route.query.cateId ? this.$route.query.cateId : '';
		if(this.curCateId){
			this.selectedKey = [this.curCateId];
		}
	},
  methods: {
		setCurTag(_id){
			this.curTagId = this.curTagId == _id ? '' : _id;
			this.getData('tag');
			this.curCateId = '';
			this.selectedKey = [];			
		},
		setCate(keys){
			let _curCateId = keys && keys.length > 0 ? keys[0] : '';
			if(this.curCateId == _curCateId) return;
			this.curCateId = _curCateId;
			this.selectedKey = [this.curCateId];
			this.getData('cate');
			this.curTagId = '';
		},
		async getData(type){
			if(type == 'tag' && this.curTagId){
				var _param = {tagId:this.curTagId}
			}else if(type == 'cate' && this.curCateId){
				var _param = {cateId:this.curCateId}
			};
			this.$router.push({
				name:'list-page',
				params:{page:1},
				query:_param
			})
			/*
			let list = await this.$axios.get(api.getContentList,{params:_param});
			this.list = list.data;
			this.path = list.path;
			***/
		},
		async setLinkNum(item,_type){
			if(_type == 2){item.likeNum++;}
			let _tips = await this.$axios.put(api.setContentTips+'/'+item.id,{type:_type},{ progress: false });
		},
		setPage(_page){
			if(this.curTagId){
				var _query = {tagId:this.curTagId}
			}else if(this.curCateId){
				var _query = {cateId:this.curCateId}
			};			
			
			this.$router.push({
				name:'list-page',
				params:{page:_page},
				query:_query
			})				
		}				
	},
	filters: {
		setImgUrl(val){
			return api.cosHttp+val;	
		},
		setTimeFormat(val){
			var paddingStr = function (_str) {
				return _str.length == 1 ? "0" + _str : _str
			}
			var _curDate = new Date(val);	
			var _YY = _curDate.getFullYear();
			var _MM = paddingStr(_curDate.getMonth() + 1 + '');
			var _DD = paddingStr(_curDate.getDate() + '');
			return `${_YY}-${_MM}-${_DD}`			
		},
		setCurTagId(tagId,tags){
			var _tag = tags.find((item)=>{ return item.id == tagId});
			return _tag.tagName;
		},
	}		
}
</script>
<style>
.ant-empty-description{color: rgba(0, 0, 0, 0.4);}
</style>
<style scoped>
.path{ height:30px; line-height:30px; font-size:16px;}
.path .path-icon{ font-size:12px; color:#666;}
.path span{ cursor:pointer; transition:all 0.2s}
.path a:hover,.path span:hover{ color:#00A6E0}
.jumbotron { margin: 0 0 20px 0; color: #fff; position:relative; height:190px; background:#2EA7E0 url(../../assets/banner.png) no-repeat; background-size:cover;}
.jumbotron-inner{ height:190px; background-size:contain;}
.lang {overflow:hidden;width:100%; position:absolute;left:0;opacity:.58;bottom:0;}
.lang_1 {background:url(../../assets/banner-b.png) repeat-x;width:4500px;height:60px;animation:langs 12s infinite linear;position:absolute;top:0;}
.lang_2 {background:url(../../assets/banner-t.png) repeat-x;width:4500px;height:55px;animation:langs 18s infinite linear;position:relative;top:0;}
@keyframes langs {0% {margin-left:0}
100% {margin-left:-1938px}
}
@-webkit-keyframes langs {0% {margin-left:0}
100% {margin-left:-1938px}
}
.jumbotron >>> h1{ font-size:40px; font-weight:normal; margin:40px 0 20px 0; padding:0;}
.jumbotron >>> h4{ font-weight:normal; margin:0; font-size:15px; letter-spacing:1px;}
.list{ overflow:hidden; padding-top:15px;}
.list >>> .ant-list-split, .list >>> .ant-list-item {border-bottom: 0; margin-bottom:0; padding: 0 0 15px 0;}

.info-content { width:100%; overflow:hidden; background-color: #fff; padding:12px; box-shadow: 2px 2px 3px #ccc; position:relative;}
.info-img{ max-height:180px; display:block; width:100%;}
.info-img img{max-height:180px; width:100%;}
.info-li{ padding:0 12px; }
.info-li h4{ margin:12px 0 7px; font-size:18px;}	
.hidden-xs{ margin:0; font-size:14px; line-height:2; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}

.text-bot{ position:absolute; bottom:15px; right:25px; text-align:right; width:100%;}
.text-bot .en{font-size:16px; color:#999;}
.text-bot i{ vertical-align:middle; margin-right:4px; margin-left:15px; color:#999;}

.page{ text-align:right; padding:30px 0;}
.page >>> .ant-pagination-item,.page >>> .ant-pagination-item-link{ width:32px; height:32px; border-radius:1px; overflow:hidden;}

.tree{ background:#fff; margin-bottom:15px; box-shadow: 2px 2px 3px #ccc; padding-left:8px; overflow:hidden;}
.tree-tit{ height:50px; margin:0; line-height:52px; padding-left:20px; overflow:hidden; font-size:16px; border-bottom:1px solid #EFEFEE;}

.tree >>> .ant-tree-switcher{ margin:8px 0 0 0;} 
.tree >>> .ant-tree-treenode-switcher-open{ overflow:hidden;}
.tree >>> .ant-tree-node-content-wrapper{ transition:all 0.1s; border:0; height:35px;  line-height:35px; border-radius:0; padding:0 0 0 8px !important; overflow:hidden !important; width:100%; margin:0;}
.tree >>> .ant-tree li{ padding:0;} 
.tree >>> .ant-tree-switcher-noop{}
.tag{ padding:15px 13px; overflow:hidden;}
.tag span{ float:left; margin:0 5px 10px; cursor:pointer; border-radius:2px; border:1px solid #D9D9D9; background:FAFAFA; font-size:14px; padding:8px 10px; overflow:hidden;}
.tag span:hover{ background:#E8F8FF; border:1px solid #BAE7FF;}
.tag span.cur{ background:#BAE7FF; border:1px solid #BAE7FF;}
.ellipsis{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.tit-img{ height:180px;}
@media (max-width: 750px) {
.tit-img{ height:auto;}
.info-li h4{ margin:2px 0 2px; font-size:16px;}		
.hidden-xs{ line-height:1.6; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.info-content{ padding-bottom:30px;}
.text-bot{ position:absolute; bottom:5px; height:20px; right:15px; text-align:right; width:100%;}
.text-bot .en{font-size:12px; color:#999;}
.text-bot i{ vertical-align:middle;margin-right:4px; margin-left:10px; font-size:12px;color:#999;}
}
</style>
